<template>
	<view class="loginPage">
		<van-tabs v-model:active="active" class="card">
			<van-tab title="注册">
				<van-form @submit="userAction" class="mgt40">
					<van-cell-group inset>
						<van-field v-model="user.username" name="username" label="用户名" placeholder="用户名" :rules="rules.username" />
						<van-field v-model="user.password" type="password" name="password" label="密码" placeholder="密码" :rules="rules.password" />
						<van-field v-model="user.repassword" type="password" name="repassword" label="确认密码" placeholder="确认密码" :rules="rules.repassword" />
						<view class="flex jcc column aic">
							<van-field v-model="user.yzm" type="text" label="验证码" name="captcha" :rules="rules.yzm">
								<template #button>
									<van-button size="small" type="primary" @click="Captcha('createCaptcha')">获取图形验证码</van-button>
								</template>
							</van-field>
							<image :src="captchaImg" class="capimg" v-if="captchaImg" @click="Captcha('refreshCaptcha')"></image>
						</view>
					</van-cell-group>
					<view style="margin: 16px">
						<van-button round block type="primary" native-type="submit">提交</van-button>
					</view>
				</van-form>
			</van-tab>
			<van-tab title="登录">
				<van-form @submit="userAction" class="mgt40">
					<van-cell-group inset>
						<van-field v-model="user.username" name="username" label="用户名" placeholder="用户名" :rules="rules.username" />
						<van-field v-model="user.password" type="password" name="password" label="密码" placeholder="密码" :rules="rules.password" />
						<view class="flex jcc column aic">
							<van-field v-model="user.yzm" type="text" label="验证码" name="captcha" :rules="rules.yzm">
								<template #button>
									<van-button size="small" type="primary" @click="Captcha('createCaptcha')">获取图形验证码</van-button>
								</template>
							</van-field>
							<image :src="captchaImg" class="capimg" v-if="captchaImg" @click="Captcha('refreshCaptcha')"></image>
						</view>
					</van-cell-group>
					<view style="margin: 16px">
						<van-button round block type="primary" native-type="submit">提交</van-button>
					</view>
				</van-form>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
const active = ref(0);
let user = reactive<any>({});
const uniIdCo = uniCloud.importObject('uni-id-co');

// 规则校验
const pattern = /\d{6}/;
const validator = (val) => val == user.password;
const rules = {
	username: [{ required: true, message: '请填写用户名' }],
	password: [{ required: true, pattern, message: '请填写密码' }],
	repassword: [{ validator, message: '两次输入密码不正确' }],
	yzm: [{ required: true, message: '请填写验证码' }]
};

const action = {
	register: async function (data) {
		let userN = await uniCloud.database().collection('uni-id-users').where({ nickname: data.nickname }).field('nickname').get();
		if (userN.result.data[0]) throw Error('该昵称已被使用');
		return await uniIdCo.registerUser(data);
	},
	login: async function (data) {
		return await uniIdCo.login(data);
	}
};
const userAction = async (value) => {
	try {
		if (active.value == 0) {
			const result = await action.register(value);
			if (result.errCode == 0) {
				uni.setStorageSync('uid', result.uid);
				uni.navigateTo({
					url: '/pages/user/personal'
				});
			}
		} else if (active.value == 1) {
			const result = await action.login(value);
			if (result.errCode == 0) {
				uni.setStorageSync('uid', result.uid);
				uni.navigateTo({
					url: '/pages/user/personal'
				});
			}
		}
	} catch (err) {
		uni.showToast({
			title: 'err'
		});
		console.log(err);
	}
};

// // 注册
// const register = async (values) => {
// 	try {

// 	} catch (err) {
// 		console.log(err);
// 	}
// };
// // 登录
// const login = async (values) => {
// 	try {
// 		return await uniIdCo.login(values);
// 	} catch (err) {
// 		console.log(err);
// 	}
// };

// 创建、更新图形验证码
const captchaImg = ref<String>('');
async function Captcha(type) {
	uni.showLoading({
		title: '加载中',
		mask: true
	});
	await uniIdCo[type]({
		scene: 'register'
	}).then((res) => {
		captchaImg.value = res.captchaBase64;
	});
	uni.hideLoading();
}
</script>

<style lang="scss">
.loginPage {
	display: flex;
	justify-content: center;
	align-items: center;
	.van-form {
		width: 700rpx;
		height: 600rpx;
		@media (max-width: 960px) {
			width: 600rpx;
			height: 500rpx;
		}
	}
	.capimg {
		width: 400rpx;
		height: 100rpx;
		margin: 40rpx 0;
	}
}
</style>
